<template>
  <div class="hello">
    <el-card class="card">
      <div>钱包状态:{{status}}</div>
    </el-card>
    <el-card class="card">
      <div>获取nft名称</div>
      <el-button type="primary" @click="_GetName()">调用</el-button>
      <el-input v-model="nft_rare['name']" placeholder="请输入内容" disabled></el-input>
    </el-card>
    <el-card class="card">
      <div>获取nft符号</div>
      <el-button type="primary" @click="_GetSymbol()">调用</el-button>
      <el-input v-model="nft_rare['symbol']" placeholder="请输入内容" disabled></el-input>
    </el-card>
    <el-card class="card">
      <div>获取盲盒剩余数量</div>
      <el-button type="primary" @click="_NftLeft()">调用</el-button>
      <el-input v-model="nft_rare['nft_left']" placeholder="请输入内容" disabled></el-input>
    </el-card>
    <el-card class="card">
      <div>我的所有NFT</div>
      <el-button type="primary" @click="_AllNft()">刷新</el-button>
      <div>稀有nft(0~99),普通nft(100~4999)</div>
      <div v-for="n in nft_rare['balance_of']" >
        {{nft_rare['nft_list'][n-1]}}
      </div>
    </el-card>

    <el-card class="card">
      <div>抽取盲盒</div>
      <el-button type="primary" @click="_UserMint()">调用</el-button>
    </el-card>
  </div>
</template>

<script>
import {
  Init,
  GetSymbol,
  GetName,
  NftLeft,
  OwnerOf,
  BalanceOf,
  TokenOfOwnerByIndex,
  UserMint
} from "../sdk/nft_sdk.js"

var self = null
export default {
  name: 'HelloWorld',
  data: function(){
    return {
      status:"未知",
      account: '',
      nft_rare:{
        name:"",
        symbol:"",
        nft_left:"",
        owner_of:"",
        balance_of: 0,
        nft_list:[],
        token_of_owner_by_index:""
      },
      nft_common: {
        name:"",
        symbol:"",
        nft_left:"",
        owner_of:"",
        balance_of:"",
        nft_list:[],
        token_of_owner_by_index:""
      }
    }
  },
  props: {
    msg: String
  },
  mounted: function (){
    self = this
    if (typeof window.ethereum === "undefined") {
        //没安装MetaMask钱包进行弹框提示
        self.status == "请安装MetaMask"
    } else {
      ethereum.enable()
      .catch(function(reason) {
          self.status = "钱包状态异常"
          //如果用户拒绝了登录请求
          if (reason === "User rejected provider access") {
              // 用户拒绝登录后执行语句；
          } else {
              // 本不该执行到这里，但是真到这里了，说明发生了意外
              Message.warning("There was a problem signing you in");
          }
      }).then(function(accounts) {
          self.status = "已链接"
          console.log(accounts[0])
          self.account = accounts[0]
          Init()
          
      });
    }
  },
  methods:{
    _GetName: function() {
      GetName().then(function(data){
        self.nft_rare["name"] = data
      })
    },
    _GetSymbol: function() {
      GetSymbol().then(function(data){
        self.nft_rare["symbol"] = data
      })
    },
    _UserMint: function() {
      UserMint(self.account).then(function(data){
        console.log(data)
      })
    },
    _NftLeft: function () {
      NftLeft().then(function(data){
        console.log(data)
        self.nft_rare["nft_left"] = data
      })
    },
    _AllNft: function () {

      console.log(self.account)
      BalanceOf(self.account).then(function (data) {
        console.log("????", data)
        self.nft_rare["nft_list"] = []
        self.nft_rare["balance_of"] = 0
        for (var i = 0; i < data; i++) {
            TokenOfOwnerByIndex(self.account, i).then(function(data){
              self.nft_rare["nft_list"].push(data)
              self.nft_rare["balance_of"]++
            })
        }
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.card{
  margin-top: 10px;
}
</style>
